<!-- Le styles -->
<link rel='stylesheet' href='http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.min.css' media='screen'>
<style>
    body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
    }
    a.menu:after, .dropdown-toggle:after {
        content: none;
    }

    ul.nav li.dropdown:hover {
        font-weight: bold;



    }
    ul.nav li.dropdown:hover ul.dropdown-menu.submenu{
        display: block;
        margin-left: 120px;

        margin-top: -36px;

        background-color:#FFF;
        font-weight: normal;

    }

</style>


<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->

</head>

<body>
    <div class="row">
        <div class="col-md-2">
            <div class="container">
                <div id="zona-navegacion" class="span3">
                    <ul id="menuLateral" class="nav nav-tabs nav-stacked">
                        <li><?php echo Html::link('inicio', '<i class="icon-home"></i> Inicio', array("tabindex" => "-1")) ?></li>

                        <li class="dropdown"><a class="dropdown-toggle" href="#menu2">Personas</a>
                            <ul class="dropdown-menu submenu">
                                <li><?php echo Html::link('formulario/index', '<i class="icon-briefcase"></i> Registrar Persona', array("tabindex" => "-1")) ?></li>
                                <li><?php echo Html::link('formulario/consultar', '<i class="icon-briefcase"></i> Consultar Personas', array("tabindex" => "-1")) ?></li>
                            </ul>
                        </li>
                        <li class="dropdown"><a class="dropdown-toggle" href="#menu3">Maestro</a>
                            <ul class="dropdown-menu submenu">
                                <li><?php echo Html::link('maestros/persona', '<i class="icon-briefcase"></i> Registrar Persona', array("tabindex" => "-1")) ?></li>
                            </ul>
                        </li>

                        <li class="dropdown"><?php echo Html::link('login/logout', '<i class="icon-home"></i> Cerrar Session', array("tabindex" => "-1")) ?></li>
                    </ul>
                </div>

            </div> <!-- /container -->
        </div>
    </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
    <script type="text/javascript">
        $('li a').click(function() {

            var $this = $(this);
            console.log('click en ' + $this.html());
        })
    </script>